import { defineComponent, ref } from 'vue'
import { SearchOutlined } from '@vicons/antd'
import {
  NButton,
  NSelect,
  NDatePicker,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NIcon,
  NCard,
  NSpace,
  NPagination,
  useMessage
} from 'naive-ui'
import { getScheduleList } from '@/service/modules/integration-schedule'
import styles from './index.module.scss'
import moment from 'moment'

const schedule = defineComponent({
  name: 'schedule',
  setup() {
    const scheduleForm = ref({
      name: '',
      // userName: '',
      state: -1,
      startTime: '',
      endTime: undefined,
      // endTime: new Date().getTime(),
      userId: 0
    })

    const scheduleSearch = () => {
      pagination.value.page = 1
      handleList()
    }

    const stateList = ref([
      { label: '全部', value: -1 },
      { label: '提交成功', value: '0' },
      { label: '正在运行', value: '1' },
      { label: '准备暂停', value: '2' },
      { label: '暂停', value: '3' },
      { label: '准备停止', value: '4' },
      { label: '停止', value: '5' },
      { label: '失败', value: '6' },
      { label: '成功', value: '7' },
      { label: '需要容错', value: '8' },
      { label: '终止', value: '9' },
      { label: '等待线程', value: '10' },
      { label: '等待依赖关系完成', value: '11' },
      { label: '', value: '12' }
    ])

    const createColumns = [
      { title: '编号', key: 'code' },
      { title: '名称', key: 'name' },
      { title: '工作流实例', key: 'projectName' },
      // { title: '执行用户', key: 'userName' },
      { title: '节点类型', key: 'taskType' },
      {
        title: '状态',
        key: 'state',
        render(row: any) {
          return stateList.value[row.state].label
        }
      },
      // { title: '开始时间', key: 'startTime' },
      { title: '结束时间', key: 'endTime' }
    ]

    const scheduleList = ref([])

    const pagination = ref({
      pageSize: 10,
      pageCount: 0,
      page: 1,
      showQuickJumper: true,
      pageSizes: [10, 30, 50],
      showSizePicker: true,
      loading: false,
      onUpdatePage: (page: number) => {
        pagination.value.page = page
        handleList()
      },
      onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        handleList()
      }
    })

    const handleList = function () {
      pagination.value.loading = true
      const temp = Object.assign({}, scheduleForm.value)
      if (scheduleForm.value.endTime) {
        // @ts-ignore
        temp.endTime = moment(scheduleForm.value.endTime).format('yyyy-MM-DD')
      }
      getScheduleList(
        // @ts-ignore
        temp,
        pagination.value.page,
        pagination.value.pageSize
      )
        .then((res: any) => {
          scheduleList.value = res.data.records
          pagination.value.pageCount = Math.ceil(
            res.data.total / pagination.value.pageSize
          )
          pagination.value.loading = false
        })
        .catch((err: any) => {
          message.error(err.msg ? err.msg : '接口未知错误')
          pagination.value.loading = false
        })
    }

    handleList()

    const message = useMessage()

    return {
      scheduleForm,
      scheduleSearch,
      stateList,
      scheduleList,
      columns: createColumns,
      pagination,
      handleList,
      message
    }
  },
  render() {
    return (
      <div>
        <NSpace vertical>
          <NCard size='small'>
            <NForm inline model={this.scheduleForm}>
              <NFormItem path='name'>
                <NInput
                  v-model:value={this.scheduleForm.name}
                  placeholder='工作流名称'
                ></NInput>
              </NFormItem>
              {/*<NFormItem path='name'>*/}
              {/*  <NInput v-model:value={this.scheduleForm.userName} placeholder='执行用户'></NInput>*/}
              {/*</NFormItem>*/}
              <NFormItem path='state' style='width: 180px'>
                <NSelect
                  v-model:value={this.scheduleForm.state}
                  placeholder='状态'
                  options={this.stateList}
                ></NSelect>
              </NFormItem>
              <NFormItem path='endTime'>
                <NDatePicker
                  type='date'
                  placeholder='结束时间'
                  v-model:value={this.scheduleForm.endTime}
                  // format={'yyyy-MM-dd'}
                  clearable
                ></NDatePicker>
              </NFormItem>
              <NFormItem>
                <NButton onClick={this.scheduleSearch}>
                  <NIcon>
                    <SearchOutlined />
                  </NIcon>
                  查询
                </NButton>
              </NFormItem>
            </NForm>
          </NCard>
          <NCard size='small'>
            <NSpace vertical>
              <NDataTable
                columns={this.columns}
                data={this.scheduleList}
                loading={this.pagination.loading}
              ></NDataTable>
              <NPagination
                class={styles['page-position']}
                display-order={['quick-jumper', 'pages', 'size-picker']}
                page-count={this.pagination.pageCount}
                page-size={this.pagination.pageSize}
                page-sizes={this.pagination.pageSizes}
                page={this.pagination.page}
                on-update:page={this.pagination.onUpdatePage}
                on-update:page-size={this.pagination.onUpdatePageSize}
                show-quick-jumper
                show-size-picker
              ></NPagination>
            </NSpace>
          </NCard>
        </NSpace>
      </div>
    )
  }
})

export default schedule
